<template>
  <div class="home">
    <h1>欢迎来到首页</h1>
    <p>这是WebApp1的主页</p>
    <router-link to="/about" class="nav-link">前往关于页面</router-link>
    <div class="flex justify-center items-center mt-4 h-[50px]">
      <div class="w-1/2 h-1/2 bg-red-500">1</div>
      <div class="w-1/2 h-1/2 bg-green-500">2</div>
    </div>
    <TestComponent v-model:testVal="count" v-bind="{ title: 'hello' }"/>
    {{ count }}
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import TestComponent from '../components/TestComponent.vue';

const count = ref('init');
let worker = ref<Worker | null>(null)
const initWorker = () => {
  worker.value = new Worker(new URL('../workers/worker.ts', import.meta.url))
  worker.value.onmessage = (event) => {
    console.log('主线程接收worker 发送消息:',event.data)
  }
  worker.value.postMessage('hello worker')
}

onMounted(() => {
  initWorker()
})
</script>

<style scoped lang="scss">
.home {
  text-align: center;
  padding: 2rem;

  .nav-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #42b883;
    color: white;
    text-decoration: none;
    border-radius: 4px;

    &:hover {
      background-color: #369870;
    }
  }


}
</style>